<template>
  <div style="background-color: #eee; width: 100%; height: 42rem">
    <div style="position: relative">
      <van-nav-bar title="收货地址" left-arrow class="vant_head" @click-left="onClickLeft" />
    </div>
    <div style="overflow-y: scroll; height: 600px">
      <div class="address">
        <div v-for="(item, index) in getaddreess" :key="index">
          <div>
            <div
              style="
                width: 100%;
                background-color: #fff;
                margin: 20px 0;
                height: 4rem;
                border-radius: 0.4rem;
              "
            >
              <div style="line-height: 2rem; position: relative">
                <span style="margin-left: 0.5rem">{{ item.nickname }}</span>
                <span>{{ item.tel }}</span> <br />
                <div style="margin-left: 0.5rem">{{ item.provice_city_area }}</div>
                <span>{{   item.detail_address }}</span>
                <img
                  @click="Toupdate(item)"
                  src="../../assets/update.png"
                  alt=""
                  style="width: 32px; height: 32px; position: absolute; right: 1rem; top: 1rem"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="width: 100%; height: 3.13rem; background-color: white; position: absolute; bottom: 0"
    >
      <button
        style="
          position: absolute;
          bottom: 0.6rem;
          width: 95%;
          height: 3.125rem;
          border-radius: 25px;
          left: 0.5rem;
          background-color: #39d067;
          border: none;
          color: #fff;
        "
        @click="toAddress"
      >
        新增地址
      </button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios'
const token = ref(localStorage.getItem('token'))
console.log(token)
const getaddreess = ref<any>([])
const Toupdate = (item: any) => {
  console.log(item)
  router.push({ path: '/Address_details', query: { item: JSON.stringify(item) } })
  getlist()
}
const raw = <any>ref({
  uid: new Date().getTime(),
  id: '',
  tel: '',
  nickname: '',
  provice_city_area: '',
  longitude: '1',
  latitude: '2',
  detail_address: '',
})
console.log(raw.value)
//渲染数据
 const getlist = async () => {
  await axios.get('/addres/adressCHunYu').then((res) => {
      console.log(res)
      getaddreess.value = res.data.data
    })
    .catch((error) => {
      console.log(error)
    })
  console.log(getaddreess.value)
}

getlist()
const router = useRouter()
const onClickLeft = () => {
  router.push({ path: '/my' })
}
const toAddress = () => {
  router.push({ path: '/addressadd' })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
  color: #63c38a !important;
}

:deep(.van-nav-bar__text) {
  color: #63c38a !important;
}
.address {
  margin-top: 1rem;
  width: 95%;
  height: 5rem;
}
</style>
